<template>
  <view>
    <view class="box-bg">

      <my-navbar :widthdata="titlewid">
        <template #icons>
          <uni-icons @click="back" color="white" type="left" size="20"> </uni-icons>
        </template>

        <template #title>
          <span id="myView" ref="myView" style="color: white;">编辑收货地址</span>
        </template>
      </my-navbar>
    </view>

    <!-- 表单-->

    <view>
      <uni-forms :modelValue="addressdata">


        <view class="uni-forms-item_plane">
          <uni-forms-item class="uni-forms-item_name" label-width="80px" label="联系人:" name="consignee" style="">
            <view class="uni-forms-item_name_display" style="display: flex;">
              <view class="" style="display: flex;position: absolute;">
                <input style="padding-top: 6px;width: 125px;" type="text" maxlength="10" v-model="addressdata.consignee"
                  placeholder="请填写收货人的姓名" />
                <text style="line-height: 38px;" class="uni-icons uniui-clear" v-if="addressdata.consignee" @click="
                                  () => {
                                    addressdata.consignee = ''
                                  }
                                "></text>
              </view>


              <radio-group class="radio-group" v-model="addressdata.sex" @change="handleRadioClick">

                <radio class="radio-input" color="orange" value="1" :checked="addressdata.sex==='1'" />
                <text>先生</text>

                <!-- 第二个单选框 -->
                <radio class="radio-input" color="orange" value="2" :checked="addressdata.sex==='2'" />
                <text>女士</text>


              </radio-group>
            </view>
          </uni-forms-item>
        </view>



        <view class="uni-forms-item_plane">
          <uni-forms-item class="uni-forms-item_number" label-width="80px" label="手机号:" name="phone">
            <view class="" style="display: flex;">
              <input style="padding-top: 6px;" type="number" maxlength="11" v-model="addressdata.phone"
                placeholder="请填写收货人的手机号" clear clearable />
              <text class="uni-icons uniui-clear" v-if="addressdata.phone" @click="
                                () => {
                                  addressdata.phone = ''
                                }
                              "></text>

            </view>
          </uni-forms-item>
        </view>


        <view class="uni-forms-item_address">
          <uni-forms-item class="uni-forms-item_address" label-width="80px" label=" 收货地址:" name="address">
            <view class="" style="display: flex;align-items: center;">

              <input @tap="openares" style="padding-top: 6px;" type="none" v-model="formData.city"
                placeholder="省/市/区" />
              <uni-icons @click="openares" style="margin-left: 30%;" color="#d8d8d8" type="down" size="20"></uni-icons>
            </view>

            <view class="" style="display: flex;">
              <input style="padding-top: 6px;" type="text" v-model="addressdata.detail" placeholder="详细地址(精准到门牌号)" />

              <text class="uni-icons uniui-clear" v-if="addressdata.detail" @click=" 
                                 () => {
                                   addressdata.detail = ''
                                 }
                               "></text>
            </view>


          </uni-forms-item>
        </view>

        <view class="uni-forms-item_plane">
          <uni-forms-item class="uni-forms-item_number" label-width="70px" label="标签:" name="tags">
            <view class="" style="line-height: 42px;">

              <span class="tag" @click="selectTags(0)" :style="'background-color:' + color1 ">{{tags[0]}}</span>
              <span class="tag" @click="selectTags(1)"
                :style="'background-color:' +color2+';'+'padding-left:30px;padding-right:30px' ">{{tags[1]}}</span>
              <span class="tag" @click="selectTags(2)" :style="'background-color:' + color3 ">{{tags[2]}}</span>

            </view>
          </uni-forms-item>
        </view>




        <!-- 下面的按钮-->
        <view class="" style="position: absolute;width: 96%;margin-left: 2%;margin-top: 20px;">
          <button @click="editchandel(addressdata)" style="background-color: orange;">
            <span>保存地址</span>
          </button>
        </view>

        <view v-show="true" class="" style="position: absolute;width: 96%;margin-left: 2%;margin-top: 80px;">
          <button @click="deletehandel(addressdata)" style="background-color: #ccc;">
            <span>删除地址</span>
          </button>
        </view>
      </uni-forms>


      <!-- 收货地址弹窗-->
      <uni-popup ref="area" type="bottom">
        <van-area :area-list="areaList" @cancel="clsoe" value="110101" @confirm="onConfirm" />
      </uni-popup>
      <van-toast id="van-toast" />
      <van-dialog id="van-dialog" />
    </view>
  </view>
</template>

<script>
  import {
    areaList
  } from '@/utils/area-data/dist/index.cjs.js';
  import Toast from '@/wxcomponents/@vant/weapp/toast/toast';
  import Dialog from '@/wxcomponents/@vant/weapp/dialog/dialog';
  import {
    getById,
    deltetAddress,
    updateAddress
  } from '@/api/address.js'
  export default {
    data() {
      return {
        wh: 0,
        btnwh: 0,
        top1: 0,
        formData: {
          city: '',
        },

        titlewid: 0,


        areaList, //地址
        tags: [
          '公司', '家', '学校'
        ],
        color1: '',
        color2: '',
        color3: '',

        active: 0,
        isicon1: false,
        isicon2: false,

        addressId: '',
        area: '',
        addressdata: {
          consignee: '',
          sex: '',
          phone: '',
          provinceName: '',
          provinceCode: '',
          cityName: '',
          cityCode: '',
          districtName: '',
          districtCode: '',
          detail: '',
          label: '',
          isDefault: 0
        }
      }


    },
    created() {
      const sysInfo = uni.getWindowInfo()
      // 可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 - 自定义的search组件高度
      this.wh = sysInfo.windowHeight - 120
      this.btnwh = sysInfo.safeArea.height / 2
      this.top1 = sysInfo.statusBarHeight * 2 + 30
      this.selectTags(0)

    },
    onLoad(options) {
      this.addressId = options.addressId

      console.log(options, "options")
      this.getByIds()
    },
    mounted() {
      //找到title的宽度
      let info = uni.createSelectorQuery().in(this).select('#myView');
      info.boundingClientRect(data => {
        console.log(data, "data")
        this.titlewid = data.width
      }).exec()
    },
    methods: {
      //回显收货地址
      async getByIds() {
        console.log(this.addressId, "this.addressId")
        const res = await getById(this.addressId)

        this.addressdata = res.data
        this.formData.city = this.addressdata.provinceName + '/' + this.addressdata.cityName + '/' + this.addressdata
          .districtName
        if (this.addressdata.label === '公司') {
          this.selectTags(0)
        } else if (this.addressdata.label === '家') {
          this.selectTags(1)
        } else if (this.addressdata.label === '学校') {
          this.selectTags(2)
        }


      },
      // 修改地址
      async editchandel(addressdata) {
        if (this.active === 0) {
          this.addressdata.label = this.tags[0]
        } else if (this.active === 1) {
          this.addressdata.label = this.tags[1]
        } else if (this.active === 2) {
          this.addressdata.label = this.tags[2]
        }
        if (this.area) {
          this.addressdata.provinceName = this.area[0].name
          this.addressdata.provinceCode = this.area[0].code
          this.addressdata.cityName = this.area[1].name
          this.addressdata.cityCode = this.area[1].code
          this.addressdata.districtName = this.area[2].name
          this.addressdata.districtCode = this.area[2].code
        }

        const res = await updateAddress(addressdata)
        if (res.code === 1) {
          Toast.success("修改成功")
        } else {
          Toast.fail("修改失败")
        }
        uni.navigateTo({
          url: "/subpkg/address/address"
        })
      },

      //根据id删除收货地址
      async deletehandel(addressdata) {
        Dialog.confirm({
            title: '',
            message: '确认要删除地址吗？',

          }).then(() => {

            const res = deltetAddress(addressdata.id)


            Toast.success("删除成功")
            uni.navigateTo({
              url: "/subpkg/address/address"
            })
          })
          .catch((e) => {
            Toast.error(e)
          })




      },

      /* handleRadioClick(event) {
         // 可以在这里添加点击单选框时的逻辑处理

         console.log(event.detail.value, 'Radio clicked');
       }, */
      //获取地区
      openares() {


        this.$refs.area.open('bottom')
      },
      clsoe() {
        this.$refs.area.close()
      },
      //确认地址
      onConfirm(data) {
        this.formData.city = ''

        const area = data.detail.values
        // console.log(area, "area")
        this.area = area
        for (let i = 0; i < area.length; i++) {
          this.formData.city += area[i].name + '/'
        }
        this.formData.city = this.formData.city.slice(0, this.formData.city.length - 1)

        this.$refs.area.close()

      },

      //标签
      selectTags(index) {
        console.log(index, "index")
        this.active = index
        if (this.active === 0) {
          this.color1 = '#e5f1fa'
          this.color2 = ''
          this.color3 = ''
        }
        if (this.active === 1) {
          this.color2 = '#fcf8ea'
          this.color1 = ''
          this.color3 = ''
        }
        if (this.active === 2) {
          this.color3 = '#e5ffe9'
          this.color1 = ''
          this.color2 = ''
        }


      },
      back() {
        uni.navigateTo({
          url: "/subpkg/address/address"
        })
      },

    },
  }
</script>

<style lang="scss">
  .radio {
    padding-right: 15px;
  }

  .radio-group {
    margin-left: 50%;
    position: absolute;
  }

  .radio-input {
    zoom: 1;
    transform: scale(0.7);
    transform-origin: center;

  }

  /*单选按钮选中后内部样式*/
  .radio-input .wx-radio-input.wx-radio-input-checked {
    border: 2rpx solid #ffe688 !important;
    /* 外圈边框，选中状态颜色*/
    background-color: white !important;
    /* 外圈边框与内圈实心圆间的内容的颜色，不设置就默认是上面的绿色*/
  }

  /*单选按钮选中后内部中心*/
  .radio-input .wx-radio-input.wx-radio-input-checked::before {
    width: 60%;
    height: 60%;
    background: #ffe688;
    /* 内圈实心圆选中状态颜色*/
    border-radius: 50%;
    content: '';
    /* 隐藏✔️*/
    transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
  }

  .uni-forms-item_plane {
    padding-top: 20px;
    padding-bottom: 10px;
    height: 50px;

    border-bottom: 1px solid #eaeaea;

  }

  .uni-forms-item_address {
    padding-top: 20px;
    padding-bottom: 20px;
    height: 50px;

    border-bottom: 1px solid #eaeaea;

  }




  .uni-forms-item__content {
    //联系人表单最右边
    margin-left: -10px;
  }

  .uni-forms-item__label {
    display: none;
    margin-left: 10px;

    font-weight: 600;

  }




  .radio-group {
    //调整两个单选框的
    padding-top: 6px;
  }

  //清除图标
  .uni-icons {
    font-family: uniicons;
    text-decoration: none;
    text-align: center;

    font-size: 20px;
    margin-top: -1px;

  }

  .uni-icons.uniui-clear {
    color: #c0c4cc;
    line-height: 37px;
    margin-left: 30%;
  }

  .uniui-clear:before {
    content: '\e66d';
  }

  //标签
  .tag {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-left: 10px;
    border: 1px solid #ccc;
  }
</style>